<script setup lang="ts">
import { ref, onMounted, watch, onBeforeUnmount } from "vue";
import { formatTime } from '@/utils'
import SvgIcon from "./svg/SvgIcon.vue";
export interface Props{
	index:number,
	items:item[],
}
type item = {
	video_src:string,
	bg_color:string,
}

const props = withDefaults(defineProps<Props>(),{
	items:<any>[],
	index:0
})
let duration = ref(0)
let videoIntervalId:any = null

watch(()=>props.index,(_,_oldval)=>{
	const oldVideo = document.getElementsByClassName('video-container')[_oldval].getElementsByTagName('video')
	if(oldVideo){
		clearInterval(videoIntervalId)
		oldVideo[0].pause()
	}
	getVideoEl().then(function(video:any){
		play(video)
	})
})

let playing = ref(false)
const play = (video:any)=>{
	video.play()
	playing.value = true
	const container = document.getElementsByClassName('video-container')[props.index]
	const current_time:any = container.getElementsByClassName('current_time')
	const duration_el = container.getElementsByClassName('duration')
	if(current_time){
		current_time.textContent = formatTime( Math.ceil(video.currentTime) )
	}
	// 更新视频当前播放时间
	videoIntervalId = setInterval(()=>{
		current_time[0].textContent = formatTime(Math.ceil(video.currentTime))
		if(Math.ceil(video.currentTime)>=duration.value){
			playing.value =false
			clearInterval(videoIntervalId)
		}
	},1000)

	// 视频时长
	getDuration(video).then(function(durationVal:any){
		duration.value = Math.ceil(durationVal)
		duration_el[0].textContent = formatTime(duration.value)
	})
}
// const pause = ()=>{
// 	getVideoEl().then(function(video:any){
// 		video.pause()
// 	})
// }
onMounted(() => {
	getVideoEl().then(function(video:any){
		play(video)
	})
});
onBeforeUnmount(()=>{
	clearInterval(videoIntervalId)
})
// 异步获取视频节点
const  getVideoEl = ()=>{
	return new Promise((resolve)=>{
		let container = document.getElementsByClassName('video-container')[props.index]
		if(container){
			const video = container.getElementsByTagName('video')
			if(video) resolve(video[0])
		}
		const intervalId = setInterval(() => {
			 container = document.getElementsByClassName('video-container')[props.index]
			if(container){
				const video = container.getElementsByTagName('video')
				clearInterval(intervalId);
				if(video){
					resolve(video[0])
				}
			}
		}, 100); 
	})
}

// 异步获取视频时长
const getDuration = (video:any)=> {
    return new Promise((resolve) => {
        if (typeof video !== 'undefined' && !isNaN(video.duration)) {
            resolve(Math.floor(video.duration)); 
        } else {
            const intervalId = setInterval(() => {
                if (typeof video !== 'undefined' && !isNaN(video.duration)) {
                    clearInterval(intervalId);
                    resolve(Math.floor(video.duration)); 
                }
            }, 100); 
        }
    });
}

</script>

<template>
	<div class="item video-container" v-for="item in items" :style="{ backgroundColor:item.bg_color }" style="height: 100%;width: 100%; display: flex;flex-direction: column;">
		<div style="flex-grow: 1; height:calc(100% - 48px);">
			<video style=" height: 100%;width: 100%;" muted>
				<source :src="item.video_src" type="video/mp4">
				您的浏览器不支持视频标签。
			</video>
		</div>
		<div class="control" style="height: 48px;width: 100%; background-color:transparent; display: flex; align-items: center;position: relative;">
			<div class="inner-control" style="padding-top: 4px;">
				<div class="left" style="display: flex; align-items: center;color: #fff;" >
					<div style="flex: 1;display: flex;">
						<SvgIcon class=""  :iconSize="2" style="margin: 0 2px 0 8px;" :name="playing?'pause':'play'" />
					</div>
					<span class="current_time">00:00</span> 
					<span style="margin: 0 .3rem;">/</span>  
					<span class="duration">00:00</span>
				</div>
				<div class="center"> 
					<div style="width: 100%; height: 2px; background-color:#333333; position: absolute;top: -1px;">  </div>
				</div>
				<div class="right"> </div>
			</div>
		</div>

		<div class="btns_panel" style="width: 4rem; min-height: 10rem; position: absolute; right: 2rem; bottom: 3rem; display: flex; background-color: transparent;flex-direction:column;">
			<div class="btn" >
				<div style="position: relative; ">
					<img src="@/assets/avatar.png" style="width:2.5rem ;height: 2.5rem; " alt="">
					<SvgIcon :iconSize="1" name="s-plus" style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);background-color: red;border-radius: 50%; color: white; "  />
				</div>
			</div>
			<div class="btn" >
				<SvgIcon :iconSize="2.4" name="like"  />
				<span>1.2万</span>
			</div>
			<div class="btn" >
				<SvgIcon :iconSize="2.4" name="comment"  />
				<span>108</span>
			</div>
			<div class="btn"  >
				<SvgIcon :iconSize="2.4" name="collect"  />
				<span>8190</span>
			</div>
			<div class="btn" >
				<SvgIcon :iconSize="2.4" name="share"  />
				<span>2871</span>
			</div>
			<div class="btn" style="">
				<SvgIcon :iconSize="2.4" name="more"  />
			</div>
		</div>
		
		<div class="slide-over-btn">
			<div style="display: flex;">
				<SvgIcon :iconSize="1" name="left"  />
			</div>
		</div>

		<!-- <slot /> -->
		<div class="video-info">
			<div class="account">
				<div class="account-name"> @ 作者  </div>
				<div class="create-time"> · 10月28日</div>
			</div>
			<div class="title"  style="--lineClamp: 2;--lineHeight: 22px; --maxHeight: 44px;padding-right: 6rem;">
				<div style="width: 40px; height: 22px;float: right; clear: both; text-align: center; border-radius: 3px; background-color: #333333; ">展开</div>
				<span style="line-height: 22px;">
					导演跟拍16年记录下了三姐妹从农村打工妹开始的人生经历 史诗级宝藏纪录片记录了三姐妹一次次的身份转变，这不仅是三姐妹的故事，也是改革开放后一代人的故事。
				这一代人不但是时代发展的螺丝钉， 同样是每一个家庭的顶梁柱；时代的洪流奔腾不息，幸运的人获得累累硕果，失忆的人半生蹉跎尝遍酸甜苦辣；也同样是这一代人缔造了堪称奇迹的今日中国
				</span> 
			</div>
		</div>
		
	</div>
</template>
<style scoped>
	.item{position: relative;height: 100%;width: 100%; display: flex; align-items: center;justify-content: center;margin-bottom: 1.875rem;border-radius: 0.8rem;overflow: hidden;}
	.control{
		z-index: 13;
		pointer-events: none;
		background-image: linear-gradient(transparent 0%,rgba(0,0,0,.6) 100%);
	}
	.control:hover{

	}
	.video-info{ display: flex; flex-direction: column; position: absolute; bottom: 48px;width: 100%;color: #fff; padding:10px 15px; }
	.video-info .account{ display: flex; flex-direction: row; font-size: 1rem;font-weight: 500; }
	.video-info .title{ 
		height:auto;
		font-size: 0.825rem;
		word-break: break-all;
        text-overflow: ellipsis;
        -webkit-line-clamp: var(--lineClamp);
		line-height: 22px;
        display: -webkit-box;
        overflow: hidden;
		-webkit-box-orient: vertical;
	}

	.video-info .title::before {
		content: "";
		height: 22px;
		float: right;
		width: 0;
	}
	.video-info .create-time{ margin-left: 0.6rem; font-size: 0.75rem;font-weight: normal;}

	.btns_panel .btn{
		width: 100%; height: 4rem; display: flex;flex-direction: column; align-items: center;justify-content: center; color: white; margin:0.2rem 0;
	}
	.slide-over-btn{
		cursor: pointer;
		 position: absolute; right: 0; top: 50%; transform: translateY(-50%); 
	}
	.slide-over-btn div{
		transition: all 0.1s;
		display: flex;align-items: center; 
		width: 32px;height: 50px; background-color:rgba(0,0,0, 0.1); box-shadow: 0 0 1px #ccc;border-radius:50px 0 0 50px;justify-content: center;color: #aaaaaa76;
	}
	.slide-over-btn div:hover{  transform: scale(1.1); width: 35px; color: #fff;background-color:rgba(0,0,0, 0.2); box-shadow: 0 0 3px #fff; }
</style>
